<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>订单管理 - 暖心助农选品平台</title>
</head>
<body>
    <div layout:fragment="content">
        <h2>订单管理</h2>

        <div th:if="${orders.empty}" class="alert alert-info">
            没有订单。
        </div>

        <div th:unless="${orders.empty}" class="row">
            <div class="col">
                <div class="card mb-3" th:each="order : ${orders}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span th:text="'订单号：' + ${order.id}">订单号</span>
                        <span class="badge" th:classappend="${order.status == T(com.farm.entity.OrderStatus).SHIPPED ? 'bg-success' : 'bg-warning'}"
                              th:text="${order.status == T(com.farm.entity.OrderStatus).SHIPPED ? '已发货' : '待发货'}">
                            待发货
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>商品</th>
                                        <th>单价</th>
                                        <th>数量</th>
                                        <th>小计</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="item : ${order.items}">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img th:if="${item.product.image}" th:src="@{${item.product.image}}" 
                                                     class="img-thumbnail me-3" style="width: 60px;" alt="产品图片">
                                                <img th:unless="${item.product.image}" th:src="@{/images/default-product.jpg}" 
                                                     class="img-thumbnail me-3" style="width: 60px;" alt="默认产品图片">
                                                <div>
                                                    <h6 class="mb-0" th:text="${item.product.name}">产品名称</h6>
                                                    <small class="text-muted" th:text="${item.product.category}">类别</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td th:text="'￥' + ${item.price}">单价</td>
                                        <td th:text="${item.quantity}">数量</td>
                                        <td th:text="'￥' + ${item.price * item.quantity}">小计</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3" class="text-end">总计：</td>
                                        <td th:text="'￥' + ${order.totalAmount}">总计</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        
                        <div class="mt-3">
                            <p class="mb-1">
                                <strong>收货人：</strong>
                                <span th:text="${order.user.realName}">收货人</span>
                            </p>
                            <p class="mb-1">
                                <strong>收货地址：</strong>
                                <span th:text="${order.deliveryAddress}">地址</span>
                            </p>
                            <p class="mb-1">
                                <strong>联系电话：</strong>
                                <span th:text="${order.contactPhone}">电话</span>
                            </p>
                            <p class="mb-1">
                                <strong>下单时间：</strong>
                                <span th:text="${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}">时间</span>
                            </p>
                        </div>
                        
                        <div class="mt-3" th:if="${order.status != T(com.farm.entity.OrderStatus).SHIPPED}">
                            <form th:action="@{/orders/{id}/status(id=${order.id})}" method="post" class="d-inline order-status-form">
                                <input type="hidden" name="status" value="SHIPPED">
                                <button type="submit" class="btn btn-primary">确认发货</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script th:inline="javascript">
            $(document).ready(function() {
                // 只监听订单状态更新的表单
                $('.order-status-form').on('submit', function(e) {
                    e.preventDefault();
                    if (confirm('确认发货吗？')) {
                        var form = $(this);
                        $.post(form.attr('action'), form.serialize())
                            .done(function(response) {
                                if (response === 'success') {
                                    // 更新状态标签
                                    var card = form.closest('.card');
                                    card.find('.badge')
                                        .removeClass('bg-warning')
                                        .addClass('bg-info')
                                        .text('已发货');
                                    
                                    // 隐藏发货按钮
                                    form.closest('.mt-3').fadeOut();
                                    
                                    // 显示成功提示
                                    alert('发货成功！');
                                } else {
                                    alert('操作失败: ' + response);
                                }
                            })
                            .fail(function() {
                                alert('操作失败');
                            });
                    }
                });
            });
        </script>
    </th:block>
</body>
</html> 